@import '../variables.less';


.help-topics-header {
  text-align: center;
  padding: 0;

  .product-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: @ZillaSlab;
    font-size: 32px;
    font-weight: bold;
    color: #000;
  }

  .product-logo {
    width: 52px;
    margin-right: 20px;
  }
  @media screen and (min-width: 970px) {
    padding: 2em 0;

    .product-title {
      font-size: 52px;
    }

    .product-logo {
      width: 100px;
    }
  }

  .product-title-text {
    position: relative;

    &:before {
      display: inline-block;
      vertical-align: middle;
      width: 2px;
      height: 0.8em;
      margin-right: 20px;
      margin-top: -6px;
      border-radius: 4px;
      background-color: #E7E7E7;
      content: "";
    }
  }
}

.html-rtl {
  .help-topics-header .product-title-text:before {
    margin-right: 14px;
    margin-left: 20px;
  }

  .help-topics .card-grid > li > a {
    padding: 0 20px 0 80px;

    &:hover:after {
      right:auto;
      left: 14px;
      justify-content: flex-end;
    }
  }

  @media screen and (min-width: 970px) {
    .help-topics-subhead .firefox-download-button {
      float: left;
      padding-right: 10px;
    }
  }
}

.help-topics-subhead {
  margin: 20px 0;
  position: relative;

  .download-buttons > .download-firefox {
    position: static;
    padding-right: 0;
  }

  .firefox-download-button,
  .download-buttons {
    float: none;
    margin-bottom: 20px;
  }

  @media screen and (min-width: 768px) {
    margin: 80px 0 40px;

    .firefox-download-button {
      float: right;
      padding-right: 63px;
      margin-bottom: 0;
    }
  }
}

.help-topics-title {
  font-size: 36px;
  margin: 0;
  font-weight: bold;
  color: #000;
}

.help-topics-desc {
  margin: 0;
}


.topic-icon {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 72px;
  width: 72px;
}

.help-topics {
  > ul:not(.card-grid) {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;

    > li {
      color: #000;
      font-family: @OpenSans;
      font-size: 18px;
      margin: 0 0 8px 0;

      &:after {
        content: '\00BB';
        margin: 0 0 0 6px;
      }
    }
  }

  .card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 20px -10px;

    > li {
      background: #f3f3f3;
      border: 1px solid #E7E7E7;
      border-radius: 2px;
      box-shadow: inset 0 -2px 0 0 #E7E7E7;
      margin: 0 10px 20px;
      min-height: 80px;
      padding: 0;
      width: 100%;
      box-sizing: border-box;

      @media screen and (min-width: 767px) {
        width: 45%;
        width: ~"calc(50% - 22px)";
      }

      @media screen and (min-width: 970px) {
        width: 31%;
        width: ~"calc(33% - 21px)";
      }

      &:before {
        content: none;
      }

      > a {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 80px 0 20px;
        height: 100%;
        text-decoration: none;

        &:hover {

          .title {
            text-decoration: underline;
          }

          &:after {
            position: absolute;
            display: inline-flex;
            justify-content: flex-end;
            align-items: center;
            top: 0;
            right: 14px;
            width: 80px;
            font-size: 12px;
            bottom: 0;
            content: attr(data-on-hover) " ›";
            color: #000;

          }
        }

        .topic-icon {
          background-position: 50% 50%;
          background-repeat: no-repeat;
          background-size: auto 100%;
          height: 24px;
          width: 24px;
          flex: 0 0 auto;
          margin-right: 16px;
        }

        .title {
          padding-left: 4px;
          font-family: @ZillaSlab;
          font-weight: bold;
          font-size: 16px;
          color: #000;
        }
      }
    }
  }

  .product-title {
    color: #000;
    font-size: 16px;
    padding-left: 4px;
    position: relative;

    > img {
      float: left;
      padding-top: 2px;
    }

    > span {
      float: left;
      padding-left: 10px;
      padding-top: 6px;
      width: 110px;
    }

    > h1 {
      float: left;
      margin: 0;
    }

    > p {
      clear: left;
      float: left;
      margin-top: 0;
      padding-left: 144px;
    }
  }

  .html-rtl & {
    .product-title {
      > img {
        float: right;
      }

      > span {
        float: right;
        padding-left: 0;
        padding-right: 10px;
      }

      > h1 {
        float: right;
      }

      > p {
        clear: right;
        float: right;
        padding-left: 0;
        padding-right: 144px;
      }
    }
  }
}

.grid_9 {
  .help-topics {
    .card-grid {
      > li {
        > a,
        > a:visited {
          .title {
            font-family: @OpenSans;
            font-size: 14px;
            line-height: 1.25;
            margin-left: 81px;
          }
        }
      }
    }
  }
}


.support-callouts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1em;

}
.support-callout {
  display: flex;
  width: 100%;
  border: 1px solid #e7e7e7;
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 0 #e7e7e7;
  margin-bottom: 20px;
  padding: 30px 40px 30px 20px;

  @media screen and (min-width: 767px) {
    width: ~"calc(50% - 72px)";
    margin-left: 0;

    & + & {
      margin-left: 20px;
    }
  }



  &-title {
    font-size: 26px;
    font-weight: bold;
    margin: 0 0 .25em 0;

    .highlight {
      color: #fff;
      background: #000;
    }
  }

  &-desc {
    font-size: 14px;
    margin-top: 0;
  }

  &-button {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;

    &, &:hover, &:link, &:visited, &:active {
      color: #000;
    }

    &:after {
      content: " ›"
    }
  }
}

.feature-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  margin: auto 40px auto 20px;
  padding: 10px;
  border: 1px solid #e7e7e7;
  box-shadow: -4px 4px 0 0 #e7e7e7;
  border-radius: 4px;


  .topic-icon {
    width: 40px;
    height: auto;
  }
}

// fake block-level links with CSS
.pos-rel {
  position: relative;
}

.expand-this-link {
  &:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
  }
}
